<template>
	<view>
		<NavBar text='预约挂号' />
		<view class="backgrpund"></view>
		<view style="position: relative;">
			<view class="yuyystyle">
				<view class="yuyystyle_name flx">
					<view class="yuyystyle_header">{{yyname}}</view>
					<view class="yuyystyle_gz">预约规则</view>
				</view>
				<view class="yuyystyle_label flx">
					<view class="yuyystyle_label_text" v-for="(item,index) in labelArray" :key="index">
						{{item}}
					</view>
				</view>
				<view class="yuyystyle_yy flx">
					<view class="yuyystyle_text">预约：{{yynumber}}次</view>
					<view class="flx1">
						<view class="yuyystyle_textz">医院主页</view>
						<view class="yuyystyle_texticon flxAlign">
							<u-icon name='arrow-right' size="28rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view style="width: 100rpx; height: 120rpx;"></view>

		<view class="suosuostyle">
			<view class="suosuostyleInput flxAlign flx2">
				<view class="flx2">
					<view class="flxAlign">
						<u-icon name="search" size="35rpx"></u-icon>
					</view>
					<view>
						<input style="margin-left: 15rpx; width: 300rpx;" v-model="sousuo" placeholder-class="plc"
							placeholder="搜索疾病/医院/医生" />
					</view>
				</view>
			</view>
			<view class="suosuostyletext">
				不知道选择哪个科室？点我<span>立即咨询</span>
			</view>
		</view>

		<view style="width: 100%; height: 10rpx; background-color: #e9e9e9; margin-top: 40rpx;"></view>

		<view class="stylezys flx1">

			<scroll-view scroll-y="true" class="scroll-Y stylezys_">
				<view :class="{labelStyle: true, selectStyle: atercct== index}" v-for="(item,index) in LabelArray"
					:key="index" @click="seleatercct(index)">
					<view class="flx1">
						<view class="flxAlign" style="margin-left:20rpx;">
							<view class="sanjiao"></view>
						</view>

						<view style="margin-left: 10rpx; font-size: 25rpx; letter-spacing: 1rpx; font-weight: 600;">
							{{item.text}}
						</view>
					</view>
				</view>
			</scroll-view>


			<view v-for="(item,index) in LabelArray" :key="index">
				<view v-if="index == atercct">
					<view class="styletext" v-for="(item,index) in Labeltext" :key="index" @click="nkcc">
						{{item.text}}
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				atercct: 0,
				yyname: '贵医院儿童医院',
				labelArray: ['三级甲等', '综合医院', '公立医院'],
				yynumber: 1232,
				sousuo: '',
				Labeltext: [{
						text: "心脏内科"
					},
					{
						text: "消化内科"
					},
					{
						text: "神经内科"
					},
					{
						text: "血液内科"
					},
					{
						text: "风湿免疫内科"
					},
					{
						text: "普通内科"
					},
					{
						text: "心脏内科专家门诊"
					},
					{
						text: "心血管慢性病管理门诊"
					},
					{
						text: "结核科"
					}
				],
				LabelArray: [{
						text: '内科',
					},
					{
						text: '外科',
					},
					{
						text: '骨科',
					},
					{
						text: '皮肤科',
					},
					{
						text: '眼科',
					},
					{
						text: '耳鼻喉科',
					},
					{
						text: '中医科',
					},
					{
						text: '麻醉科',
					},
					{
						text: '全科医疗科',
					},
					{
						text: '康复医疗科',
					},
					{
						text: '康复骨科',
					}
				],
				IselectStyle: false

			}
		},
		onLoad(options) {
			console.log(options.data);
			this.yyname = JSON.parse(decodeURIComponent(options.data)).text
		},
		methods: {
			seleatercct(index) {
				this.atercct = index
				if (index == 0) {
					this.Labeltext = [{
							text: "心脏内科"
						},
						{
							text: "消化内科"
						},
						{
							text: "神经内科"
						},
						{
							text: "血液内科"
						},
						{
							text: "风湿免疫内科"
						},
						{
							text: "普通内科"
						},
						{
							text: "心脏内科专家门诊"
						},
						{
							text: "心血管慢性病管理门诊"
						},
						{
							text: "结核科"
						}
					]
				} else if (index == 1) {
					this.Labeltext = [{
							text: "心脏外科"
						},
						{
							text: "消化外科"
						},
						{
							text: "神经外科"
						},
						{
							text: "血液外科"
						},
						{
							text: "风湿免疫外科"
						},
						{
							text: "普通外科"
						}
					]
				} else if (index == 2) {
					this.Labeltext = [{
						text: "普通骨科"
					}]
				} else if (index == 3) {
					this.Labeltext = [{
						text: "癫痫科"
					}]
				} else {
					this.Labeltext = [

					]
				}
			},
			nkcc() {
				uni.navigateTo({
					url: "/pages/reservationRegister/DepartmentDetails"
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.backgrpund {
		width: 100%;
		height: 300rpx;
		background: linear-gradient(#0c8efc, #00b8fe);
		// linear-gradient(blue, red);
	}

	.yuyystyle {
		width: 90%;
		border-radius: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		overflow: hidden;
		box-sizing: border-box;
		box-shadow: 0px 0px 10px 0px rgba(0, 184, 254, .5);
		position: absolute;
		top: -100rpx;
		margin-left: 5%;

		.yuyystyle_name {
			.yuyystyle_header {
				font-size: 35rpx;
				letter-spacing: 1rpx;
				font-weight: 600;
				color: #333;
			}

			.yuyystyle_gz {
				width: 120rpx;
				line-height: 50rpx;
				border: solid 1rpx #d9d9d9;
				text-align: center;
				font-size: 20rpx;
				border-radius: 10rpx;
				font-weight: 600;
			}
		}

		.yuyystyle_label {
			width: 70%;
			margin-top: 15rpx;

			.yuyystyle_label_text {
				font-size: 30rpx;
				font-weight: 600;
			}


		}

		.yuyystyle_label :first-child {
			color: #e8743c;
		}

		.yuyystyle_yy {
			margin-top: 30rpx;

			.yuyystyle_text {
				font-size: 26rpx;
				line-height: 30rpx;
				color: #cecece;
			}

			.yuyystyle_textz {
				color: #333;
				font-size: 25rpx;
				line-height: 30rpx;
				font-weight: 600;
			}

			.yuyystyle_texticon {
				margin-left: 10rpx;
			}
		}
	}

	.suosuostyle {
		width: 90%;
		border-radius: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		overflow: hidden;
		box-sizing: border-box;
		box-shadow: 0px 0px 10px 0px rgba(0, 184, 254, .5);
		margin: 0 auto;
		margin-top: 30rpx;

		.suosuostyleInput {
			width: 90%;
			margin: 0 auto;
			background-color: #e8e8e8;
			border-radius: 20rpx;
			height: 60rpx;

			.plc {
				font-size: 28rpx;
				color: #333;
				font-weight: 600;
				letter-spacing: 2rpx;
			}
		}

		.suosuostyletext {
			font-size: 25rpx;
			text-align: center;
			line-height: 60rpx;
			font-weight: 600;
			letter-spacing: 1rpx;
			margin-top: 13rpx;

			span {
				color: #66bdf0;
			}
		}
	}



	.stylezys {

		.stylezys_ {
			width: 28%;

			.labelStyle {
				width: 100%;
				height: 80rpx;
				background-color: #eaeaea;
				border-bottom: solid 1rpx #cecece;
				line-height: 80rpx;

				.sanjiao {
					width: 18rpx;
					height: 18rpx;
				}
			}

			.selectStyle {
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				border-bottom: solid 1rpx #cecece;
				line-height: 80rpx;

				.sanjiao {
					width: 0px;
					height: 0px;
					border-top: 3px solid transparent;
					border-left: 5px solid #3a98e1;
					border-right: 3px solid transparent;
					border-bottom: 3px solid transparent;
				}
			}
		}

		.stylezys_ :last-child {
			border-bottom: none;
		}
	}

	.styletext {
		width: 100%;
		line-height: 80rpx;
		font-size: 25rpx;
		letter-spacing: 2rpx;
		margin-left: 60rpx;
		font-weight: 600;
		margin-top: 20rpx;
	}

	.scroll-Y {
		height: 850rpx;
	}
</style>